<template>
  <div>
    <!-- 头部部分 -->
    <header>
      <span class="jiantou" @click="Return"></span>
      <span>{{ $route.query.region }}</span>
      <span @click="Return">切换城市</span>
    </header>
    <!-- 主要内容部分 -->
    <main>
      <input
        @focus="Focus"
        @input="disappear"
        v-model="value"
        type="text"
        placeholder="输入学校,商务楼,地址"
      />
      <ul v-if="bool">
        <li>
          <span>保存的数据</span>
          <span @click="DeleteAll"> 删除记录 </span>
        </li>
        <li @click="revise(value,index)" v-for="(value, index) in arr" :key="index">
          <span>
            {{ value }}
          </span>
          <span @click="Delete(index)"> 删除 </span>
        </li>
      </ul>
      <button @click="addTo">提交</button>
    </main>
    <footer>
      <ul v-if="bool1">
        <li class="wz" v-for="(value, index) in arrNew2" :key="index">
          <span class="te" @click="jumpToo(index)">
            {{ value.address }}
          </span>
          <button @click="DeleteToo(index)">删除</button>
        </li>
      </ul>
      <ul>
        <li
          class="wz"
          @click="jump(index)"
          v-for="(value, index) in arrNew"
          :key="index"
        >
          <p>
            {{ value.name }}
          </p>

          {{ value.address }}
        </li>
      </ul>
    </footer>
  </div>
</template>
<style scoped>
.te {
  width: 60%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3190e8;
  width: 100%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
}
.jiantou {
  width: 0.24rem;
  height: 0.24rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(225deg);
}
main {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: #fff;
  font-size: 0.3rem;
}
main input {
  width: 80%;
  margin-left: 10%;
  height: 0.8rem;
  outline: none;
  margin-top: 0.3rem;
  border: 1px solid #e4e4e4;
  padding: 0 0.3rem;
  font-size: 0.3rem;
}
main button {
  width: 80%;
  margin-left: 10%;
  height: 0.8rem;
  outline: none;
  margin-top: 0.3rem;
  background-color: #3190e8;
  color: #fff;
  border: 0 solid #000;
}
main ul {
  position: fixed;
  top: 2rem;
  left: 10%;
  width: 80%;
  height: 3rem;
  overflow: auto;
}
main ul li {
  width: 100%;
  height: 1rem;
  line-height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.2rem;
  border-bottom: 1px solid #000;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  background: #fff;
  box-sizing: border-box;
}
footer {
  margin-top: 0.6rem;
}
footer ul {
  width: 100%;
  overflow: hidden;
}
footer ul li {
  width: 80%;
  margin-left: 10%;
  height: 0.8rem;
  align-items: center;
  font-size: 0.3rem;
  border: 1px solid #000;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<script>
import { getSearch } from "../../api/index.js";
export default {
  data() {
    return {
      id: "",
      value: "",
      arr: [],
      bool: false,
      region: "",
      arrNew: [],
      bool1: true,
      arrNew2: [],
    };
  },

  methods: {
    /* 返回 */
    Return() {
      this.$router.push({ path: "/" });
    },
    /* 添加 */
    async addTo() {
      if (this.arr.indexOf(this.value) == -1) {
        this.arr.push(this.value);
      }

      /* 热门城市 */
      var region = await getSearch(this.$route.query.id, this.value);
      if (region.data) {
        this.arrNew = region.data;
      }
      localStorage.arrr = JSON.stringify(this.arr);

      this.bool1 = false;
    },
    /* 删除 */
    Delete(index) {
      this.arr.splice(index, 1);
      console.log(this.arr);
    },
    /* 焦点 */
    Focus() {
      this.bool = true;
    },
    /* 监听input */
    disappear() {
      if (this.value) {
        this.bool = false;
      }
    },
    /* 删除全部 */
    DeleteAll() {
      this.arr = [];
      console.log(this.arr);
      this.bool = false;
    },
    /* 删除一个 */
    DeleteToo(index) {
      this.arrNew2.splice(index, 1);
      localStorage.arr = JSON.stringify(this.arrNew2);
      console.log(this.arrNew2);
    },
    /* 更改文字 */
    revise(value,index) {
        this.value = value
        setTimeout(() => {
            this.bool =false
        }, 100);
    },
    /* 页面跳转 */
    jump(index) {
      console.log(this.arrNew[index].address);
      if (this.arrNew2.indexOf(this.arrNew[index].address) == -1) {
        this.arrNew2.push(this.arrNew[index]);
      }
      localStorage.arr = JSON.stringify(this.arrNew2);
      this.$router.push({
        path: "/elmshop",
        query: {
          region: this.arrNew[index].address,
          latitude: this.arrNew[index].latitude,
          longitude: this.arrNew[index].longitude,
        },
      });
    },
    /* 页面跳转 */
    jumpToo(index) {
      this.$router.push({
        path: "/elmshop",
        query: {
          region: this.arrNew2[index].address,
          latitude: this.arrNew2[index].latitude,
          longitude: this.arrNew2[index].longitude,
        },
      });
    },
  },
  /* 页面渲染 */
  mounted() {
    if (localStorage.arr) {
      this.arrNew2 = JSON.parse(localStorage.arr);
    }
    if (localStorage.arrr) {
      this.arr = JSON.parse(localStorage.arrr);
    }
  },
};
</script>
